<template>
        <div class="baoming">
        <div class="baoming-header">
            <div class="header-bg"></div>
            <div class="header-text clearfix">
                <p class="fl-l">请选择您所在的社区</p>
                <p class="fl-r">太西街道</p>
            </div>
        </div>
        <div class="area-list">
            <ul class="clearfix">
                <li class="area-item" v-for="(item, index) in 9" :key="index">
                    <router-link :to="`/partyReport/form?id=0${index+1}`">
                        <img :src="`../../../static/images/area-0${index+1}.jpg`">
                    </router-link>
                </li>
            </ul>
        </div>
    </div>
</template>

<style scoped>
.baoming{
    width: 100%;
    background: #fff;
}
.baoming-header{
    padding-top: 5px;
    width: 100%;
}
.baoming-header .header-bg{
    width: 100%;
    height: 50px;
    background-image: url('../../../static/images/baodao-title.png');
    background-size: 60%;
    background-repeat: no-repeat;
}
.baoming-header .header-text{
    padding: 0 10px;
    margin-top: 30px;
}
.baoming-header .header-text p{
    font-size: 16px;
    color: #510711;
}
.area-list{
    margin-top: 20px;
    padding: 0 10px;
}
.area-list .area-item{
    float: left;
    margin-bottom: 3px;
    margin-right: 10px;
    width: calc(50% - 5px);
}
.area-list .area-item:nth-child(2n){
    margin-right: 0px;
}
</style>
